<template>
  <div id="khfw-list">
    <div>
      <span style="padding-right: 10px">
        <el-button type="warning" :disabled="loading" @click="clickSelectClear"
          >清空搜索项</el-button
        >
      </span>
      <el-select
        style="width: 10vw"
        v-model="selectValueKHBH"
        placeholder="客户"
        :disabled="loading"
      >
        <el-option
          v-for="item in selectOptionsKHBH"
          :key="item.customerId"
          :label="item.customerName"
          :value="item.customerId"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="selectValueCLR"
        placeholder="请选择处理人"
        style="width: 11vw"
        :disabled="loading"
      >
        <el-option
          v-for="item in selectOptionsCLR"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="selectValueMYD"
        placeholder="请选择客户满意度"
        style="width: 11vw"
        :disabled="loading"
      >
        <el-option
          v-for="item in [
            { id: null, value: '<-不筛选满意度->' },
            { id: 1, value: '一星' },
            { id: 2, value: '二星' },
            { id: 3, value: '三星' },
            { id: 4, value: '四星' },
            { id: 5, value: '五星' },
          ]"
          :key="item.id"
          :label="item.value"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="selectValueFWLX"
        placeholder="请选择服务类型"
        style="width: 12vw"
        :disabled="loading"
      >
        <el-option
          v-for="item in [
            { key: null, value: '<-不选择服务类型->' },
            { key: '咨询', value: '咨询' },
            { key: '投诉', value: '投诉' },
            { key: '建议', value: '建议' },
          ]"
          :key="item.key"
          :label="item.value"
          :value="item.key"
        >
        </el-option>
      </el-select>
      <span style="padding-left: 10px">
        <el-button type="success" :disabled="loading" @click="clickSelect"
          >搜索已归档条目</el-button
        >
      </span>
    </div>
    <br />

    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      highlight-current-row
      height="70vh"
    >
      <el-table-column
        :resizable="false"
        prop="customer.customerName"
        label="客户名称"
        width="200"
        fixed
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="servicesId"
        label="编号"
        width="50"
      >
      </el-table-column>
      <el-table-column :resizable="false" prop="customerId" v-if="false">
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="servicesType"
        label="服务类型"
        width="100"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="servicesOutline"
        label="概要"
        width="200"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="servicesRequirement"
        label="详细要求"
        width="200"
      >
      </el-table-column>

      <el-table-column
        :resizable="false"
        prop="servicesCreator"
        label="创建人"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="servicesCreationTime"
        label="创建时间"
        width="160"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="servicesState"
        label="状态"
        width="80"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="servicesAllocateTime"
        label="分配时间"
        width="160"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="servicesConductor"
        label="处理人"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="servicesHandling"
        label="处理方法"
        width="200"
      >
      </el-table-column>
      <el-table-column :resizable="false" prop="oppStateId" v-if="false">
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="servicesProcessingTime"
        label="处理时间"
        width="160"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="servicesCustomerFeedback"
        label="客户反馈"
        width="200"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="servicesSatisfaction"
        label="客户满意度"
        width="100"
      >
      </el-table-column>
      <el-table-column :resizable="false" prop="oppStateId" v-if="false">
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="servicesFeedbackTime"
        label="反馈时间"
        width="160"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        fixed="right"
        label="操作"
        width="220"
      >
        <template slot-scope="scope">
          <!-- v-if="scope.row.oppStateId == 1001" -->
          <el-button
            v-if="userPower === 'SE'"
            :disabled="scope.row.servicesState != '新创建'"
            slot="reference"
            size="mini"
            type="warning"
            @click="handleFP(scope.$index, scope.row)"
            >分配</el-button
          >
          <el-button
            v-if="userPower === 'AM'"
            :disabled="scope.row.servicesState != '已分配'"
            size="mini"
            type="primary"
            @click="handleCL(scope.$index, scope.row)"
            >处理</el-button
          >
          <el-button
            :disabled="scope.row.servicesState != '已处理'"
            slot="reference"
            size="mini"
            type="primary"
            @click="handleFK(scope.$index, scope.row)"
            >反馈</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="服务分配" :visible.sync="dialogToVisible">
      <el-form
        label-position="right"
        label-width="80px"
        ref="formLabelTo"
        :model="formLabelTo"
      >
        <el-form-item
          label="处理人"
          prop="conductor"
          :rules="[{ required: true, message: '请选择客户经理' }]"
        >
          <el-select
            v-model="formLabelTo.conductor"
            placeholder="请选择处理人"
            style="width: 100%"
          >
            <el-option
              v-for="item in account_manager_options"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogToVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitFP('formLabelTo')"
          >分 配</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="服务分配" :visible.sync="dialogCLVisible">
      <el-form
        label-position="right"
        label-width="80px"
        ref="formLabelCL"
        :model="formLabelCL"
      >
        <el-form-item
          label="处理方法"
          prop="note"
          :rules="[{ required: true, message: '请输入处理方法' }]"
        >
          <el-input
            placeholder="请输入处理方法"
            v-model="formLabelCL.note"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCLVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCL('formLabelCL')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="用户反馈" :visible.sync="dialogFKVisible" width="40vw">
      <el-form
        label-position="right"
        label-width="80px"
        ref="formLabelFK"
        :model="formLabelFK"
      >
        <el-form-item label="满意度" prop="satisfy">
          <el-rate
            style="padding-top: 10px"
            v-model="formLabelFK.satisfy"
          ></el-rate>
        </el-form-item>
        <el-form-item
          label="反馈信息"
          prop="note"
          :rules="[{ required: true, message: '请输入反馈信息' }]"
        >
          <el-input
            type="textarea"
            placeholder="请输入反馈信息"
            v-model="formLabelFK.note"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFKVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitFK('formLabelFK')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectValueKHBH: null,
      selectValueCLR: null,
      selectValueMYD: null,
      selectValueFWLX: null,
      selectOptionsKHBH: null,
      selectOptionsCLR: null,
      userPower: this.$store.state.userPower.power,
      selectDisable: true,
      selectValue: null,
      loading: true,
      opp_options: null,
      opp_state_options: null,
      account_manager_options: null,
      tableData: null,
      dialogFormVisible: false,
      dialogToVisible: false,
      dialogCLVisible: false,
      dialogFKVisible: false,
      formLabelTo: {
        id: null,
        conductor: null,
      },
      formLabelCL: {
        id: null,
        note: null,
      },
      formLabelFK: {
        id: null,
        note: null,
        satisfy: 3,
      },
      formLabelAlign: {
        scId: null,
        scCustomerName: "", //客户名称
        oppId: "", //机会来源
        oppDescription: "", //机会来源的描述
        scContact: "", //联系人
        scContactNumber: "", //联系人电话
        scPercentageOfSuccess: "", //成功几率%
        scOutline: "", //概要
        scCreatorId: null, //创建人
        scCreationTime: null, //创建时间
        scAssignToId: null, //指派给
        scAssignTime: null, //指派时间
        oppStateId: null, //销售机会状态
      },
    };
  },
  created: function () {
    this.initTableData();
    this.$axios({
      method: "post",
      crossdomain: true,
      url: "/account-manager/amList",
    }).then((response) => {
      // console.log(response.data.data[0]); //请求成功返回的数据 客户经理信息
      this.account_manager_options = response.data.data[0];
      this.selectOptionsCLR = response.data.data[0];
      this.selectOptionsCLR.push({
        name: "<-不筛选处理人->",
        id: null,
      });
    });
    this.$axios({
      method: "post",
      crossdomain: true,
      url: "/customer/list",
    }).then((response) => {
      // console.log(response.data.data[0]); //请求成功返回的数据
      this.selectOptionsKHBH = response.data.data[0];
      this.selectOptionsKHBH.push({
        customerName: "<-不筛选客户->",
        customerId: null,
      });
    });
  },
  methods: {
    initTableData() {
      this.loading = true;
      this.$axios({
        method: "post",
        crossdomain: true,
        url:
          "/services/" +
          this.$store.state.userPower.power.toLowerCase() +
          "List",
      }).then((response) => {
        // console.log(response.data.data[0]); //请求成功返回的数据 列表信息
        this.tableData = response.data.data[0];
        this.loading = false;
      });
    },
    initSelectData() {
      this.loading = true;
      this.$axios({
        method: "post",
        crossdomain: true,
        url: "/services/query",
        data: this.$qs.stringify({
          customer: this.selectValueKHBH, //客户编号
          handler: this.selectValueCLR, //处理人
          inquiry: this.selectValueMYD, //满意度
          type: this.selectValueFWLX, //服务类型
        }),
      }).then((response) => {
        this.tableData = response.data.data[0];
        // console.log(response.data.data[0]); //请求成功返回的数据 列表信息
        this.loading = false;
      });
    },
    handleFP(index, row) {
      this.formLabelTo.id = row.servicesId;
      // this.formLabelTo.row = row;
      this.dialogToVisible = true;
    },
    handleCL(index, row) {
      this.formLabelCL.id = row.servicesId;
      // this.formLabelTo.row = row;
      this.dialogCLVisible = true;
    },
    handleFK(index, row) {
      this.formLabelFK.id = row.servicesId;
      // this.formLabelTo.row = row;
      this.dialogFKVisible = true;
    },
    submitFP(formName) {
      // console.log(this.formLabelTo);return false;
      this.$refs[formName].validate((valid) => {
        // console.log(this.formLabelAlign);
        if (valid) {
          this.$axios({
            method: "put",
            crossdomain: true,
            url:
              "/services/seUpdate/" +
              this.formLabelTo.id +
              "?conductor=" +
              this.formLabelTo.conductor,
          }).then((response) => {
            // console.log(response); //请求成功返回的数据
            if (response.data.type == "OK") {
              // this.formLabelAlign.row = Object.assign({}, this.formLabelAlign.row, params);
              // console.log(this.formLabelAlign.row);
              this.$notify({
                title: "成功啦",
                type: "success",
                duration: "1000", // 1000ms后关闭
                showClose: false,
              });
              // this.$router.replace({ path: "/" });
              this.dialogToVisible = false;
              this.initTableData();
            } else {
              this.$notify({
                title: "失败惹",
                message: response.data.msg,
                type: "error",
                duration: "4000", // 1000ms后关闭
                showClose: false,
              });
            }
          });
        } else {
          this.$notify({
            title: "错了哦",
            message: "还有选项没有填对呢",
            type: "error",
            duration: "4000", // 1000ms后关闭
            showClose: false,
          });
          return false;
        }
      });
    },
    submitCL(formName) {
      // console.log(this.formLabelTo);return false;
      this.$refs[formName].validate((valid) => {
        // console.log(this.formLabelAlign);
        if (valid) {
          this.$axios({
            method: "put",
            crossdomain: true,
            url: "/services/amUpdate/?" + this.$qs.stringify(this.formLabelCL),
          }).then((response) => {
            // console.log(response); //请求成功返回的数据
            if (response.data.type == "OK") {
              // this.formLabelAlign.row = Object.assign({}, this.formLabelAlign.row, params);
              // console.log(this.formLabelAlign.row);
              this.$notify({
                title: "成功啦",
                type: "success",
                duration: "1000", // 1000ms后关闭
                showClose: false,
              });
              // this.$router.replace({ path: "/" });
              this.dialogCLVisible = false;
              this.initTableData();
            } else {
              this.$notify({
                title: "失败惹",
                message: response.data.msg,
                type: "error",
                duration: "4000", // 1000ms后关闭
                showClose: false,
              });
            }
          });
        } else {
          this.$notify({
            title: "错了哦",
            message: "还有选项没有填对呢",
            type: "error",
            duration: "4000", // 1000ms后关闭
            showClose: false,
          });
          return false;
        }
      });
    },
    submitFK(formName) {
      // console.log(this.formLabelTo);return false;
      this.$refs[formName].validate((valid) => {
        // console.log(this.formLabelAlign);
        if (valid) {
          this.$axios({
            method: "put",
            crossdomain: true,
            url: "/services/feedback/?" + this.$qs.stringify(this.formLabelFK),
          }).then((response) => {
            // console.log(response); //请求成功返回的数据
            if (response.data.type == "OK") {
              // this.formLabelAlign.row = Object.assign({}, this.formLabelAlign.row, params);
              // console.log(this.formLabelAlign.row);
              this.$notify({
                title: "成功啦",
                type: "success",
                duration: "1000", // 1000ms后关闭
                showClose: false,
              });
              // this.$router.replace({ path: "/" });
              this.dialogFKVisible = false;
              this.initTableData();
            } else {
              this.$notify({
                title: "失败惹",
                message: response.data.msg,
                type: "error",
                duration: "4000", // 1000ms后关闭
                showClose: false,
              });
            }
          });
        } else {
          this.$notify({
            title: "错了哦",
            message: "还有选项没有填对呢",
            type: "error",
            duration: "4000", // 1000ms后关闭
            showClose: false,
          });
          return false;
        }
      });
    },
    clickSelect() {
      this.initSelectData();
    },
    clickSelectClear() {
      this.selectValueKHBH = null;
      this.selectValueCLR = null;
      this.selectValueMYD = null;
      this.selectValueFWLX = null;
      this.initTableData();
    },
  },
};
</script>

<style></style>
